<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button:not(#divo,#div10,#div11,#div12,#button删除,#buttondy){
            width: 5vw;
            height: 5vw;
            background-color: aqua;
            margin: 0 auto;
            border-radius: 50%;
            text-align: center;
            line-height: 5vw;
            font-size: 2.5vw;
            font-weight:bolder;
            position: absolute;
            transition: all 0.5s;
        }
        button:hover:not(#buttondy){
            background-color: rgb(15, 15, 241)!important;
            color: aliceblue!important;
            width: 5.15vw!important;
            height: 5.15vw!important;
        }
        #buttondy{
            width: 5vw;
            height: 12.5vw;
            background-color: aqua;
            margin: 0 auto;
            border-radius: 1vw;
            text-align: center;
            line-height: 10vw;
            font-size: 2.5vw;
            font-weight:bolder;
            position: absolute;
            left: 62.5vw;
            top: 15vw;
            transition: all 0.5s;
        }
        #buttondy:hover{
            background-color: rgb(15, 15, 241)!important;
            color: aliceblue!important;
            width: 5.15vw!important;
            height: 12.65vw!important;
            
        }
        #button7{      
            left: 40vw;
        }
        #button8{
            left: 47.5vw;
        }
        #button9{left: 55vw;
        }
        #button4{      
            left: 40vw;
            top: 7.5vw;
        }
        #button5{
            left: 47.5vw;
            top: 7.5vw;
        }
        #button6{
            left: 55vw;
            top: 7.5vw;
        }
        #button1{      
            left: 40vw;
            top: 15vw;
        }
        #button2{
            left: 47.5vw;
            top: 15vw;
        }
        #button3{
            left: 55vw;
            top: 15vw;
        }
        #button0{
            left: 47.5vw;
            top: 22.5vw;
        }
        #divo{
            width: 90%;
            position: absolute;
            top:30vw;
            right: 13vw;
            
        }
        #buttonc{
            left: 40vw;
            top: -7.5vw;
        }
        #buttonchu{
            left: 47.5vw;
            top: -7.5vw;
        }
        #buttoncheng{
            left: 55vw;
            top: -7.5vw;
        }
        #button删除{
            width: 5vw;
            height: 5vw;
            background-color: aqua;
            margin: 0 auto;
            border-radius: 50%;
            text-align: center;
            line-height: 5vw;
            font-size: 1.5vw;
            font-weight:bolder;
            position: absolute;
            left: 62.5vw;
            top: -7.5vw;
            transition: all 0.5s;
        }
        #buttonjian{
            left: 62.5vw;
        }
        #buttonjia{
            left: 62.5vw;
            top: 7.5vw;
        }
        
        #buttondian{
            left: 40vw;
            top: 22.5vw;
        }
        #buttonbfh{
            left: 55vw;
            top: 22.5vw;
        }
        #div10{
            width: 50%;
            height: 15vw;
            text-align: center;
            margin: 0 auto;
            border: 3px solid black;
            position: relative;
            top: 1vw;
            background-color: rgb(19, 139, 244);
        }
        #div11,#div12{
            width: 99%;
            height: 7vw;
            margin: 1px;
            /* border: 3px solid black; */
            font-size: 2.5vw;
            font-weight: bolder;
        }
        #div11{
            text-align: left;
        }
        #div12{
            text-align: right;
        }
        
    </style>
</head>
<body>
    
    <div id="div10">
        <div id="div11"></div>
        <div id="div12"></div>
    </div><!--这是输入框-->
    <div id="divo">
        
        <button id="button7">7</button>
        <button id="button8">8</button>
        <button id="button9">9</button>
        <button id="button4">4</button>
        <button id="button5">5</button>
        <button id="button6">6</button>
        <button id="button1">1</button>
        <button id="button2">2</button>
        <button id="button3">3</button>
        <button id="button0">0</button>
        <button id="buttonc">c</button>
        <button id="buttonchu">/</button>
        <button id="buttoncheng">*</button>
        <button id="button删除">删除</button>
        <button id="buttonjian">—</button>
        <button id="buttonjia">+</button>
        <button id="buttondy">=</button>
        <button id="buttondian">.</button>
        <button id="buttonbfh">%</button>
    </div>
    <script>
        var div11=document.getElementById("div11");
        var div12=document.getElementById("div12");
        var button7=document.getElementById("button7");
        var button8=document.getElementById("button8");
        var button9=document.getElementById("button9");
        var button4=document.getElementById("button4");
        var button5=document.getElementById("button5");
        var button6=document.getElementById("button6");
        var button1=document.getElementById("button1");
        var button2=document.getElementById("button2");
        var button3=document.getElementById("button3");
        var button0=document.getElementById("button0");
        var buttonc=document.getElementById("buttonc");
        var buttonchu=document.getElementById("buttonchu");
        var buttoncheng=document.getElementById("buttoncheng");
        var button删除=document.getElementById("button删除");
        var buttonjian=document.getElementById("buttonjian");
        var buttonjia=document.getElementById("buttonjia");
        var buttondy=document.getElementById("buttondy");
        var buttondian=document.getElementById("buttondian");
        var buttonbfh=document.getElementById("buttonbfh");
        let a,b,c;
        button1.onmousedown=function(){
            div11.innerHTML+="1";
        }
        button2.onmousedown=function(){
            div11.innerHTML+="2";
        }
        button3.onmousedown=function(){
            div11.innerHTML+="3";
        }
        button4.onmousedown=function(){
            div11.innerHTML+="4";
        }
        button5.onmousedown=function(){
            div11.innerHTML+="5";         
        }
        button6.onmousedown=function(){
            div11.innerHTML+="6";
        }
        button7.onmousedown=function(){
            div11.innerHTML+="7";
        }
        button8.onmousedown=function(){
            div11.innerHTML+="8";
        }
        button9.onmousedown=function(){
            div11.innerHTML+="9";
        }
        button0.onmousedown=function(){
            div11.innerHTML+="0";
        }
        button删除.onmousedown=function(){
            div11.innerHTML=div11.innerHTML.slice(0,-1);
        }
        buttonjian.onmousedown=function(){
            div11.innerHTML+="-";
        }
        buttonjia.onmousedown=function(){
            div11.innerHTML+="+";
        }
        buttoncheng.onmousedown=function(){
            div11.innerHTML+="*";
        }
        buttondian.onmousedown=function(){
            div11.innerHTML+=".";
        }
        buttonbfh.onmousedown=function(){
            div11.innerHTML+="%";
        }
        buttonchu.onmousedown=function(){
            div11.innerHTML+="/";
        }
        buttonc.onmousedown=function(){
            div11.innerHTML="";
            div12.innerHTML="";
        }
        buttondy.onmousedown=function(){
            div12.innerHTML=eval(div11.innerHTML);
        }
        
        
    </script>
    
</body>
</html>